
<script>
import axis from './axis.vue';
import axisLine from './axisLine.vue';
import splitLine from './splitLine.vue';
import axisLabel from './axisLabel.vue';
export default {
  name: 'Y',
  components: {
    axis,
    axisLine,
    splitLine,
    axisLabel
  },
  inject: ['father'],
  data() {
    return {
      activeName: '1',
      options: [
        {
          title: '轴配置',
          name: '1',
          render: () => <axis />
        },
        {
          title: '刻度',
          name: '2',
          render: () => <axisLabel />
        },
        {
          title: '轴线',
          name: '3',
          render: () => <axisLine />
        },
        // {
        //   title: '轴刻度',
        //   name: '4',
        //   render: () => <axisScale />
        // },
        {
          title: '分割线',
          name: '5',
          render: () => <splitLine />
        }
      ]
    };
  },
  computed: {
    yAxis: {
      get() {
        return this.father.echartsOptions.yAxis;
      },
      set(val) {
        this.father.echartsOptions.yAxis = val;
      }
    }
  },
  mounted() {},
  methods: {},
  render() {
    return (
      <div>
        <el-form-item label="显示">
          <el-switch v-model={this.yAxis.show}></el-switch>
        </el-form-item>
        <el-form-item label="翻转轴">
          <el-switch v-model={this.yAxis.inverse}></el-switch>
        </el-form-item>
        <el-collapse v-model={this.activeName} accordion>
          {this.options.map((item) => {
            return (
              <el-collapse-item title={item.title} name={item.name}>
                {item.render()}
              </el-collapse-item>
            );
          })}
        </el-collapse>
      </div>
    );
  }
};
</script>

<style scoped>
</style>